// pages/search-music/index.js
import { getHotSearchData, getSearchUnionMessage } from '../../service/api_search'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 网络数据
    hotSearchData: [],
    relateSongs: [],
    nodesList: [],
    // 控制变量 
    // 搜索状态 0：还没有搜索 1：正在搜索 2：确认搜索
    searchState: 0,

    // 搜索内容
    searchValue: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取网络数据
    this.getPageData()
  },

  /*************************** 获取网络数据 ***************************/
  getPageData() {
    getHotSearchData().then(res => {
      this.setData({ hotSearchData: res.result.hots })
    })
  },
  getSearchUnionMessage(keywords, limit) {
    getSearchUnionMessage(keywords, limit).then( (res) => {
      this.setData({ relateSongs: res.result.songs})
      // 搜索时为默认参数，即limit为undefined
      if(!limit) this.processRichText()
    })
  },
  /*************************** 事件监听 ***************************/
  // 输入搜索时
  handleInput(e) {
    const value = e.detail.value.trim()
    this.setData({searchValue: e.detail.value})
    if(value == "") {
      this.setData({ searchState: 0 })
    } else {
      this.setData({ searchState: 1 })
      // 获取相关搜索信息
      this.getSearchUnionMessage(value)
    }
    
  },
  // enter确认搜索
  handleConfirmSearchClick(e) {
    const value = e.detail.value
    // 只有空格就结束
    if(e.detail.value == '') return 
    // 获取相关搜索信息,此时要展示结果，应该获取更多。这里展示30条
    this.getSearchUnionMessage(value, 30)
    // 确认搜索
    // 1.关闭正在搜索的内容
    // 2.打开搜索结果
    this.setData({ searchState: 2 })
  },
  // 点击热门搜索
  handleClickHotSearch(e) {
    const hotValue = e.target.dataset.value
    // 1.搜索框的内容需要改变
    // 2.搜索状态改变
    this.setData({ searchValue: hotValue, searchState: 2 })
    // 3.请求更多结果数据
    this.getSearchUnionMessage(hotValue, 30)
  },
  // 清除搜索内容
  handleClickClearSearch() {
    this.setData({ searchValue: '', searchState: 0 })
  },
  // 点击搜索出的提示内容
  handleClickSearchContent(e) {
    // 1.取得提示词
    const value = this.data.relateSongs[e.target.dataset.index].name
    // 2.搜索状态改变
    this.setData({ searchValue: value, searchState: 2 })
    // 3.请求更多结果数据
    this.getSearchUnionMessage(value, 30)
  },
  /*************************** 数据处理 ***************************/
  // 富文本数据处理
  processRichText() {
    let nodesList = []
    for(let i = 0; i < this.data.relateSongs.length; i++) {
      nodesList.push(this.processNode(this.data.relateSongs[i].name))
    }
    this.setData({ nodesList })
  },
  // 创建节点
  createNode(text, isActive = false) {
    let color = 'black'
    if(isActive) color = 'red'
    let node = {
      name: 'span',
      attrs: {
        style: 'color: ' + color + ';'
      },
      children: [{
        type: 'text',
        text: text
      }]
    }
    return node
  },
  // 匹配子字符串
  processNode(str) {
    let nodes = []
    // 全部变成小写 - 匹配的字符也变成小写
    str = str.toLowerCase()
    const searchValue = this.data.searchValue.toLowerCase()
    // 1.直接匹配不成功
    // 2.给出的相关名称长度小于输入的长度
    // 就全部设置原来的值，然后退出
    if(searchValue.length > str.length || str.indexOf(searchValue) == -1) {
      nodes.push(this.createNode(str))
      return nodes
    }
    // 还有匹配成功时
    while(str.indexOf(searchValue) != -1 && str.length != 0) {
      let node
      // 判断情况
      // 1.首部匹配中
      if(str.indexOf(searchValue) == 0) {
        node = this.createNode(str.slice(0, searchValue.length), true)
        // 取出末尾的部分继续循环
        str = str.slice(searchValue.length)
      } else {
        // 2.非首部匹配中,切除0到匹配的位置前一个位置，继续循环即可
        node = this.createNode(str.slice(0, str.indexOf(searchValue)))
        // 取出末尾的部分继续循环
        str = str.slice(str.indexOf(searchValue))
      }
      nodes.push(node)
    }
    // 还有末尾的内容的话
    if(str != '') {
      nodes.push(this.createNode(str))
    }
    return nodes
  },
})